<template>
  <div>
    <div class="nationalMap" ref="nationalMap_id"></div>
    <div v-show="CurrentLevel == 2" class="nationalMap_return" @click="withdraw()">
      <img src="../../../static/image/left_jt.png" alt class="nationalMap_return_imgs" />
      <p>返回全国</p>
    </div>
  </div>
</template>

<script>
import { commonRequest } from "../../api/api.js";

export default {
  name: "nationalMap",
  components: {},
  data() {
    return {
      CurrentLevel: 1,

      Lzqgdtsj: [],
      // 省级选中
      provinceIndex: "",
      // 当前省
      dqData: "",
      // 当前市
      citData: ""
    };
  },
  mounted() {},
  methods: {
    // 所有地区
    allRegions(data) {
      // console.log("7373", data);
      this.dqData = data;
      for (let i = 0; i < data.length; i++) {
        var name = data[i].province.replace(
          /省|市|自治区|特别行政区|壮族|回族|维吾尔/g,
          ""
        );
        this.Lzqgdtsj.push({
          name: name,
          value: 0
        });
      }
      this.introduceJs("china");
    },
    // 获取数据
    obtain(value) {
      // console.log("898989", value);
      var that = this;
      var provinceValue = null;
      var cityValue = null;
      if (value != "china") {
        // console.log("级别", this.CurrentLevel);
        if (that.CurrentLevel == 1) {
          // console.log("11111", this.dqData);
          for (let i = 0; i < that.dqData.length; i++) {
            var name = that.dqData[i].province.replace(
              /省|市|自治区|特别行政区|壮族|回族|维吾尔/g,
              ""
            );
            if (name == value) {
              provinceValue = that.dqData[i].province; //当前省市名称
              that.citData = that.dqData[i].city; // 当前省市所有地区
              // console.log("城市地区", that.citData);
            }
          }
          that.CurrentLevel = 2;
        } else if (that.CurrentLevel == 2) {
          for (let i = 0; i < that.citData.length; i++) {
            if (that.citData[i].name == value) {
              cityValue = that.citData[i].name;
            }
          }
        }
      }
      // 接口数据地图赋值
      commonRequest("/api/pms/pmsPolicyNotice/getPolicyAtlas", {
        queryType: 0,
        province: provinceValue,
        city: cityValue
      }).then(res => {
        if (provinceValue == null) {
          for (let i = 0; i < res.length; i++) {
            var name = res[i].province.replace(
              /省|市|自治区|特别行政区|壮族|回族|维吾尔/g,
              ""
            );
            for (let w = 0; w < that.Lzqgdtsj.length; w++) {
              if (that.Lzqgdtsj[w].name == name) {
                that.Lzqgdtsj[w].value = res[i].policyTotal;
              }
            }
          }
        } else {
          // 直辖市取地区名
          let name = provinceValue.replace(
            /省|市|自治区|特别行政区|壮族|回族|维吾尔/g,
            ""
          );
          if (
            name === "重庆" ||
            name === "上海" ||
            name === "天津" ||
            name === "北京"
          ) {
            for (let i = 0; i < res.length; i++) {
              for (let w = 0; w < that.Lzqgdtsj.length; w++) {
                if (that.Lzqgdtsj[w].name == res[i].area) {
                  that.Lzqgdtsj[w].value = res[i].policyTotal;
                }
              }
            }
          } else {
            for (let i = 0; i < res.length; i++) {
              for (let w = 0; w < that.Lzqgdtsj.length; w++) {
                if (that.Lzqgdtsj[w].name == res[i].city) {
                  that.Lzqgdtsj[w].value = res[i].policyTotal;
                }
              }
            }
          }
        }
        that.wholeCountry(value);
      });
    },
    // 返回全国
    withdraw() {
      var that = this;
      that.introduceJs("china");
      that.CurrentLevel = 1;
      that.provinceIndex = "";
      that.allRegions(that.dqData);
      that.$emit("nationalMapaccept", "-1", "暂无");
      that.$emit("chooseCity");
    },
    //js引入
    introduceJs(value) {
      var that = this;
      this.obtain(value);
    },
    //地图生成
    wholeCountry(value) {
      // console.log("value", value);
      // console.log("数据", this.Lzqgdtsj);

      var titles = "全国";
      if (value != "china") {
        titles = value;
      }
      var that = this;
      var optionMap = {
        title: {
          text: titles,
          subtext: "",
          x: "center",
          top: 30
        },
        tooltip: {
          trigger: "item"
        },

        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          left: 0,
          bottom: 10,
          splitList: [
            { start: 20000 },
            { start: 10000, end: 20000 },
            { start: 5000, end: 10000 },
            { start: 2000, end: 5000 },
            { start: 1000, end: 2000 },
            { start: 500, end: 1000 },
            { start: 200, end: 500 },
            { end: 200 }
          ],
          color: [
            "#3c55bb",
            "#0068ce",
            "#0f74d8",
            "#2489ec",
            "#44a2ff",
            "#98ccff",
            "#cee6ff",
            "#ecf6ff"
          ]
        },
        //配置属性
        series: [
          {
            name: "政策数量",
            type: "map",
            mapType: value,
            roam: false,
            zoom: 1.1,
            label: {
              normal: {
                show: true //省份名称
              },
              emphasis: {
                show: false
              }
            },
            data: that.Lzqgdtsj //数据
          }
        ]
      };
      //初始化echarts实例
      var myChart = echarts.init(that.$refs.nationalMap_id);
      //使用制定的配置项和数据显示图表
      myChart.setOption(optionMap);
      if (myChart._$handlers && myChart._$handlers.click) {
        myChart._$handlers.click.length = 0;
      }
      myChart.on("click", function(params) {
        if (params.value == 0 || Object.is(params.value, NaN)) {
          that.$message.warning({
            message: "此地区暂无政策信息",
            type: "warning"
          });
        } else {
          document.documentElement.scrollTo({
            top: 800,
            behavior: "smooth" //  smooth(平滑滚动),instant(瞬间滚动),默认auto
          });
          if (that.CurrentLevel == 1) {
            for (let i = 0; i < that.dqData.length; i++) {
              var name = that.dqData[i].province.replace(
                /省|市|自治区|特别行政区|壮族|回族|维吾尔/g,
                ""
              );
              if (name == params.name) {
                // 直辖市取全部城市数据里面城市地区的值
                if (
                  name === "重庆" ||
                  name === "上海" ||
                  name === "天津" ||
                  name === "北京"
                ) {
                  that.provinceIndex = i;
                  that.Lzqgdtsj = [];
                  for (let q = 0; q < that.dqData[i].city[0].area.length; q++) {
                    that.Lzqgdtsj.push({
                      name: that.dqData[i].city[0].area[q],
                      value: 0
                    });
                  }
                } else {
                  that.provinceIndex = i;
                  that.Lzqgdtsj = [];
                  for (let q = 0; q < that.dqData[i].city.length; q++) {
                    that.Lzqgdtsj.push({
                      name: that.dqData[i].city[q].name,
                      value: 0
                    });
                  }
                }
              }
            }
            that.$emit("nationalMapaccept", that.provinceIndex, params.name);
            that.introduceJs(params.name);

            let item = that.dqData.find(
              el => el.province.indexOf(params.name) > -1
            );
            that.$emit("chooseCity", 1, item.province);
          } else if (that.CurrentLevel == 2) {
            that.$emit("nationalMapaccept", that.provinceIndex, params.name);

            that.$emit("chooseCity", 2, params.name);
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.nationalMap {
  width: 600px;
  height: 600px;
}
.nationalMap_return {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 999;
  p {
    float: left;
    font-size: 18px;
    color: rgb(68, 162, 255);
  }
  img {
    width: 26px;
    float: left;
  }
}
</style>
